<template>
  <b-page class="lbhb">
    <a-alert
      message="使用须知"
      description="*以下裂变海报来源于网络整理，仅供版式参考"
      type="info"
      show-icon
    />
    <div class="liebian">
      <div
        @click="selectTag(item)"
        v-for="(item,index) in tagList"
        :key="index"
        class="ant-btn d-jcc-aic nopitch"
        :class="{pitchOn:item.active}"
        style="margin-right: 16px; margin-bottom: 24px;"><span>{{ item.name }}</span></div>
    </div>
    <div class="poster-img-wrap">
      <div v-if="!showPoster.length" class="d-jcc-aic min-height-500">
        <a-empty/>
      </div>
      <div class="poster-img-list">
        <img
          v-for="item in showPoster"
          :key="item.id"
          :src="item.posterUrl"
          class="poster-img">
      </div>
      <div class="poster-img-pagination">
        <a-pagination
          v-if="showPoster.length"
          v-model="pagination.current"
          :total="pagination.total"
          show-less-items
          @change="changePage"/>
      </div>
    </div>
  </b-page>
</template>

<script>
    import API from '../../../api/lbzl'

    export default {
        name: 'Cpsc',
        data () {
            return {
                tagList: [
                    {
                        name: '全部', id: '', active: true
                    }
                ],
                showPoster: [],
                current: 1,
                pagination: {
                    current: 1,
                    total: 0,
                    size: 10
                },
                queryParam: {
                    tagId: ''
                }
            }
        },
        mounted () {
            this.getTag()
            this.getPage()
        },
        methods: {
            getTag () {
                API.listTag().then(res => {
                    res.forEach(item => {
                        this.$set(item, 'active', false)
                    })
                    this.tagList = this.tagList.concat(res)
                })
            },
            getPage () {
                API.FissionPosterPage(Object.assign(this.pagination, this.queryParam)).then(res => {
                    this.showPoster = res.records
                    this.pagination.total = res.total
                })
            },
            selectTag (item) {
                this.tagList.forEach(item => {
                    item.active = false
                })
                // 初始化到第一页
                this.pagination.current = 1
                this.queryParam.tagId = item.id
                // 切换选中状态
                item.active = true
                this.getPage()
            },
            changePage (current) {
                this.pagination.current = current
                this.getPage()
            }
        }
    }
</script>

<style lang="less">
    .lbhb {
        .min-height-500 {
            min-height: 500px;
        }

        .liebian {
            background-color: white;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            padding-top: 24px;
        }

        .poster-img-wrap {
            padding: 0 8px 24px 0;
            background-color: white;

            .poster-img-list {
                display: flex;
                flex-flow: row wrap;
                justify-content: flex-start;
            }

            .poster-img {
                margin: 24px 24px 0 0;
                width: 200px;
                height: 355px;
            }
        }

        .ant-btn {
            margin-right: 16px;
            margin-bottom: 24px;
            border-color: transparent;
            box-shadow: none;
            cursor: pointer;
        }

        .nopitch {
            color: #353535;
        }

        .pitchOn {
            background: #1890ff;
            color: #fff;
        }

        .poster-img-pagination {
            margin-top: 24px;
            padding-bottom: 24px;
        }
    }
</style>
